<template>
	<view class="content">
		<view class="body">
			<text class="name">账号登录</text>
			<view class="row">
				<view class="left-icon">
					<uni-icons type="home-filled" color="#1a90e4" size="26"></uni-icons>
				</view>
				<view class="v-input">
					<input class="u-input" v-model="tel" type="number" placeholder-class="placeholdercss" placeholder="请输入手机号" />
				</view>
				<view class="more-icon" @click="showUser = true">
					<uni-icons type="bars" color="#1a90e4" size="26"></uni-icons>
				</view>
			</view>
			<view class="row">
				<view class="left-icon">
					<uni-icons type="locked-filled" color="#1a90e4" size="26"></uni-icons>
				</view>
				<view class="v-input">
					<input class="u-input" v-model="password" type="password" placeholder-class="placeholdercss" placeholder="请输入密码" />
				</view>
			</view>
			<view class="remembercss">
				<label class="tip">
					<checkbox-group @change="checkboxChange">
						<checkbox value="1" checked="true" />
						记住密码
					</checkbox-group>
				</label>
			</view>
			<view class="btnLogin" type="primary" @click="login">登录</view>
			<u-popup :round="10" :show="showUser" @close="showUser = false">
				<view class="popup-user">
					<view class="popup" v-for="(item, index) in userArray" :key="index" @click="selectUser(item)">
						<text class="text-popup">{{ item[0] }}</text>
						<text class="btn-clear" @click.stop="removeUser(item)">X</text>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
import loginjs from '@/api/login.js';
import common from '@/utils/common.js';
export default {
	data() {
		return {
			tel: '',
			password: '',
			userArray: [],
			isRemember: true,
			showUser: false
		};
	},
	onLoad() {
		let res = uni.getStorageSync('remember') || [];
		if (res.length > 0) {
			this.userArray = res;
			this.tel = this.userArray[this.userArray.length - 1][0];
			this.password = common.decode(this.userArray[this.userArray.length - 1][1]);
		}
	},
	methods: {
		removeUser(item) {
			let index = this.exist(item[0]);
			this.userArray.splice(index, 1);
			uni.setStorageSync('remember', this.userArray);
		},
		selectUser(item) {
			this.tel = item[0];
			this.password = common.decode(item[1]);
			this.showUser = false;
		},
		checkboxChange(e) {
			if (e.detail.value.length > 0) this.isRemember = true;
			else this.isRemember = false;
		},
		exist(name) {
			let index = -1;
			for (let i = 0; i < this.userArray.length; i++) {
				if (this.userArray[i][0] == name) {
					index = i;
					break;
				}
			}
			return index;
		},
		async login() {
			if (!this.tel) {
				uni.showToast({
					icon: 'error',
					title: '请输入手机号',
					duration: 1000
				});
				return;
			}
			if (!this.password) {
				uni.showToast({
					icon: 'error',
					title: '请输入密码',
					duration: 1000
				});
				return;
			}
			//获取个人信息以及角色
			let res = await loginjs.accountLogin(this.tel.trim(), this.password.trim());
			if (common.httpIsWrong(res)) return;
			let index = this.exist(this.tel.trim());
			if (index >= 0) {
				this.userArray.splice(index, 1);
			}
			if (this.isRemember) {
				this.userArray.push([this.tel.trim(), common.encode(this.password.trim())]);
			}
			uni.setStorageSync('remember', this.userArray);
			let userinfo = res.json.data.data;
			let that = this;
			uni.showToast({
				icon: 'none',
				title: userinfo.userPhone + '-登陆成功',
				success() {
					setTimeout(() => {
						that.$store.dispatch('initUserInfo', userinfo);
						that.$store.dispatch('loadGlobalData');
						//页面跳转
						that.$store.dispatch('roleToPage');
					}, 500);
				}
			});
		}
	}
};
</script>

<style lang="scss">
.content {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: white;
	.body {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 200rpx;
		.remembercss {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			width: 90%;
			.tip {
				margin-right: 10rpx;
			}
		}
		.name {
			margin-bottom: 80rpx;
			letter-spacing: 10rpx;
			font-size: 40rpx;
		}
		.row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 90%;
			margin: 20rpx 0;
			position: relative;
			border: solid 1rpx #d5d5d5;
			border-radius: 10rpx;
			height: 100rpx;
			.more-icon {
				width: 80rpx;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				border-left: solid 1rpx #d5d5d5;
			}
			.left-icon {
				width: 100rpx;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				padding-left: 10rpx;
			}
			.title {
				width: 160rpx;
				text-align-last: justify;
			}
			.v-input {
				flex: 1;
				height: 100%;
				color: #1a90e4;
				display: flex;
				justify-content: center;
				align-items: center;
				letter-spacing: 10rpx;
			}
			.u-input {
				width: 100%;
				height: 100%;
				font-size: 16px;
				border-radius: 4px;
				border: none !important;
			}
			.placeholdercss {
				color: #999;
			}
		}
		.btnLogin {
			width: 90%;
			margin-top: 100rpx;
			background-color: #1a90e4;
			border-radius: 4px;
			text-align: center;
			line-height: 100rpx;
			color: white;
			font-size: 40rpx;
		}
	}
	.popup-user {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		.popup {
			width: 100%;
			height: 120rpx;
			border-bottom: solid 1rpx #dddddd;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			.text-popup {
				color: #1a90e4;
				letter-spacing: 10rpx;
			}
			.btn-clear {
				color: #bcbcbc;
				position: absolute;
				right: 40rpx;
				padding: 5rpx 10rpx;
			}
		}
	}
}
::v-deep .u-slide-up-enter-active {
	max-height: 35%;
	overflow: scroll;
}
</style>
